<%include("/public/header.html",{title:"手机商城"}){}
%>
	<script type="text/javascript">
	
		var updateStatus = function(context, id, status){
			AlertUtil.confirm(context,function(){
				$.post('confirm-receipt',{'id': id,'status': status,page: $('.pageIndex').attr('page')},function(data){
					$('#table-container').html(data);
				}); 
			});
		};
	
		$(function() {
			$('#table-container').load('search');
			$(document).on('click','.btn-confirm',function(){
				updateStatus('是否确认收货？', $(this).parents('tr').attr('id'), 2);
			});
			
			$(document).on('click','.btn-cp',function(){
				updateStatus('是否确定退货？', $(this).parents('tr').attr('id'), 3);
			});
			
			$(document).on('click','.btn-delete',function(){
				var id = $(this).parents('tr').attr('id');
				AlertUtil.confirm('是否删除订单？', function(){
					$.post('delete',{'id':id, page: $('.pageIndex').attr('page')}, function(data){
						$('#table-container').html(data);
					});
				});
			});
			
			$(document).on('click','.page-click a', function(){
				var page = $(this).attr('page');
				if(page > 0 && (!$(this).attr('pageCount') || $(this).attr('pageCount') >= page)){
					$.get('search?page='+page, function(data){
						$('#table-container').html(data);
					});
				}
			});
		});
		
	</script>
	
	<a href="settlement">结算</a>

	<div class="container-fluid">
		<div class="row-fluid">
			<div class="col-xs-3" sylte="background-color:red;"></div>
			<div class="col-xs-7">
				<div class="order-div">
					<span>我的订单</span> <span> <select>
							<option>所有</option>
							<option>待收货</option>
							<option>已收货</option>
							<option>退货中</option>
							<option>已退货</option>
					</select>
					</span>
				</div>


				<div id="table-container">
					<% #ajax test:{ %>
					<% if(orderVos.~size > 0){%>
					<table class="table table-striped">
						<thead>
							<tr>
								<td width="50%" colspan="2">订单信息</td>
								<td>数量</td>
								<td>金额</td>
								<td>订单状态</td>
								<td>操作</td>
							</tr>
						</thead>

						<tbody class="f-s-12">
							<tr style="height: 5px;"></tr>

							<% 
								var page = orderVos[0].page!, pageCount = orderVos[0].pageCount!;
								for(orderVo in orderVos!){
							%>
								<tr>
									<td class="txt-l-im order-detail" style="background-color: #E9F1EB !important;" colspan="6">
										订单号: <span class="serialNumber">${orderVo.order.serialNumber}</span>&nbsp;&nbsp;&nbsp;
										提交时间: ${orderVo.order.createDate!,dateFormat="yyyy-MM-dd hh:mm:ss"}
									</td>
								</tr>
								<tr class="bor-1 bor-t-n-im" id="${orderVo.order.id}">
									<td class="txt-l-im bor-t-no-im ver-c-im" colspan="2">
									<%
										var total = 0, number = 0;
										for(shopCart in orderVo.shopCarts){
											number = number + shopCart.number;
											total = total + @com.sc.utils.MathUtil.mult(shopCart.number, shopCart.price);
									%>
										<a href="#${shopCart.id}"> <img class="img-rounded" src="${shopCart.url}"></a>
									<%}%>
									</td> 
									<td class="bor-t-n-im ver-c-im">${number}</td>
									<td class="price bor-t-n-im ver-c-im">¥<span>${total}</span></td>
									<td class="bor-t-n-im ver-c-im">
										<%
											var status, confirm;
											switch(orderVo.order.status){
												case 1:
													status = "待收货";
													confirm = "确认收货";
													break;
												case 2:
													status = "已收货";
													break;
												case 3:
													status = "退货中";
													break;
												case 4:
													status = "已退货";
													break;
											}
										%>
										${status}
										<%
											if(orderVo.order.status == 1){
											%>
												<br><button type="button" class="btn btn-success btn-confirm">${confirm}</button>
											<%
											}
										%>
									</td>
									<td class="bor-t-n-im ver-c-im">
										<p><button type="button" class="btn btn-danger btn-delete">删除</button></p>
										<%
											if(orderVo.order.status != 3 && orderVo.order.status != 4){
											%>
												<p><button type="button" class="btn btn-cp btn-warning">退货</button></p>
											<%
											}
										%>
									</td>
								</tr>
							<% } %>
						</tbody>
					</table>
					<div class="txt-c">
						<ul class="page-click pagination">
							<li><a class="poin" page="1">首页</a></li>
							<li><a class="poin" page="${page - 1}">&laquo;</a></li>
							<% if(page >= 5 && page == pageCount){%>
								<li><a class="poin" page="${page - 4}">${page - 4}</a></li>
							<%}%>
							<% if(page >= 4 && page >= pageCount - 1){%>
								<li><a class="poin" page="${page - 3}">${page - 3}</a></li>
							<%}%>
							
							<% if(page - 2 > 0){%>
								<li><a class="poin" page="${page - 2}">${page - 2}</a></li>
							<%}%>
							<% if(page - 1 > 0){%>
								<li><a class="poin" page="${page - 1}">${page - 1}</a></li>
							<%}%>
							<li><a class="poin pageIndex" page="${page}" style="background-color:#eee;">${page}</a></li>
							<% if(page < pageCount){%>
								<li><a class="poin" page="${page + 1}">${page + 1}</a></li>
							<%}%>
							<% if(page < pageCount - 1){%>
								<li><a class="poin" page="${page + 2}">${page + 2}</a></li>
							<%}%>
							
							<% if(page <= 2 && page < pageCount - 2){%>
								<li><a class="poin" page="${page + 3}">${page + 3}</a></li>
							<%}%>
							<% if(page == 1 && page < pageCount - 3){%>
								<li><a class="poin" page="${page + 4}">${page + 4}</a></li>
							<%}%>
							<li><a class="poin" page="${page + 1}" pageCount="${pageCount}">&raquo;</a></li>
							<li><a class="poin" page="${pageCount}">尾页</a></li>
						</ul>
					</div>
					<% } else{%>
						<div><h3>暂无订单</h3></div>
					<% }%>
					<% } %>
				</div>

			</div>
		</div>
	</div>
<%include("/public/footer.html",{title:"手机商城"}){}%>